<template>
  <div>
    <el-table
      :data="list"
      :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
      :highlight-current-row="true"
      :max-height="1500"
      :size="'small'"
      v-loading="loading"
      align="align"

    >
      <el-table-column width="300" align="center" label="活动ID" element-loading-text="请给我点时间！">
        <template slot-scope="scope">
          <span>{{ scope.row.promotionCode }}</span>
        </template>
      </el-table-column>

      <el-table-column width="240" align="center" label="活动名称">
        <template slot-scope="scope">
          <span>{{ scope.row.promName}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" label="活动类型">
        <template slot-scope="scope">
          <span>{{genFrontPromType(scope.row.frontPromType)}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" label="活动渠道">
        <template slot-scope="scope">
          <span>{{scope.row.channelCodes || "-"}}</span>
        </template>
      </el-table-column>

      <el-table-column width="360" align="center" label="活动时间">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }} 至 {{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column width="240" class-name="status-col" align="center" label="创建人">
        <template slot-scope="scope">
          <span>{{ scope.row.creatorName }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" class-name="status-col" align="center" label="活动状态">
        <template slot-scope="scope">
          <!--          活动状态 0初始化 1 待提交  2 待审核  3未开始 4 审核不通过  5 进行中  6 已过期  7 已关闭-->
          <span v-if="scope.row.status == 0">待提交</span>
          <span v-else-if="scope.row.status == 1">待提交</span>
          <span v-else-if="scope.row.status == 2">待审核</span>
          <span v-else-if="scope.row.status == 3">未开始</span>
          <span v-else-if="scope.row.status == 4">审核不通过</span>
          <span v-else-if="scope.row.status == 5">进行中</span>
          <span v-else-if="scope.row.status == 6">已过期</span>
          <span v-else-if="scope.row.status == 7">已关闭</span>
          <span v-else-if="scope.row.status == 8">已结束</span>
          <span v-else-if="scope.row.status == 9">活动草稿</span>
          <span v-else-if="scope.row.status == 10">模板状态</span>
          <span v-else-if="scope.row.status == 11">审核通过</span>
          <span v-else>未知状态{{scope.row.status}}</span>
        </template>
      </el-table-column>

      <el-table-column width="240" class-name="status-col" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column width="390" class-name="status-col" align="center" label="操作" fixed="right">
        <!--        <template slot-scope="scope">-->
        <!--          <kt-button @click="seeNewTab(scope.row)" type="primary" size="mini" style="" label="查看"/>-->
        <!--          <kt-button size="mini" v-if="scope.row.status == '1' || scope.row.status == '0' || scope.row.status == '4' " perms="market:presell:edit" @click="updateBtnShow(scope.row)" label="编辑"/>-->
        <!--          <kt-button type="danger" size="mini" v-if="scope.row.status == '1' || scope.row.status == '0' "  perms="market:presell:delete" @click="deleteActivity(scope.row.id)" label="删除"/>-->
        <!--          <kt-button size="mini" v-if="scope.row.status != '0' " perms="market:presell:copy" @click="copyBtnShow(scope.row.id)" label="复制"/>-->
        <!--          <kt-button size="mini" v-if="scope.row.status == '5' || scope.row.status == '3' " perms="market:presell:close"  @click="closeActivity(scope.row)" label="关闭"/>-->
        <!--        </template>-->
        <template slot-scope="scope">
          <span v-if="[3,5].includes(scope.row.status) && scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <kt-button
              type="text"
              class="textButton"
              @click="copyBtnShow(scope.row.id)"
              label="复制"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="updatePromotionStatus(scope.row.id, 7)"
              label="关闭"
            />
            <!--            <el-button type="text" class="textButton" @click="viewMarketingReport(scope.row)">查看营销报告</el-button>-->
          </span>
          <span v-else-if="[9].includes(scope.row.status)  && scope.row.editFlag">
            <kt-button
              type="text"
              class="textButton"
              @click="updateBtnShow(scope.row)"
              label="编辑"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="deleteActivity(scope.row.id)"
              label="删除"
            />
          </span>
          <span v-else-if="[2,6,7,8].includes(scope.row.status)  && scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <kt-button
              type="text"
              class="textButton"
              @click="copyBtnShow(scope.row.id)"
              label="复制"
            />
            <!--            <el-button type="text" class="textButton" @click="viewMarketingReport(scope.row)">查看营销报告</el-button>-->
          </span>
          <span v-else-if="[4].includes(scope.row.status)  && scope.row.editFlag">
            <kt-button type="text" class="textButton" @click="seeNewTab(scope.row)" label="查看"></kt-button>
            <kt-button
              type="text"
              class="textButton"
              @click="copyBtnShow(scope.row.id)"
              label="复制"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="updateBtnShow(scope.row)"
              label="编辑"
            />
          </span>
          <span v-else-if="[1].includes(scope.row.status)  && scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <kt-button
              type="text"
              class="textButton"
              @click="copyBtnShow(scope.row.id)"
              label="复制"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="updateBtnShow(scope.row)"
              label="编辑"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="deleteActivity(scope.row.id)"
              label="删除"
            />
          </span>
          <span v-else-if="!scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar t_r">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest"
        :current-page="listQuery.pageNo"
        :page-size="listQuery.pageSize"
        :total="totalSize"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  channelCodeConverter,
  frontPromTypeConverter
} from "@/market/dict/marketDict";
import KtButton from "@/views/Core/KtButton";
import marketRequest from "@/market/request/marketRequest";

export default {
  components: {
    KtButton
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      status = Number(status);
      return statusMap[status];
    }
  },
  props: {
    type: {
      type: String,
      default: "0"
    },
    parentFilters: {
      type: Object
    }
  },
  data() {
    return {
      list: [],

      listQuery: {
        pageNo: 1,
        pageSize: 10,
        status: this.type,
        sort: "+id"
      },
      loading: false,
      totalSize: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.$emit("create"); // for test
      let _filters = JSON.parse(JSON.stringify(this.parentFilters));

      _filters["pageNo"] = this.listQuery.pageNo;
      _filters["pageSize"] = this.listQuery.pageSize;
      _filters["status"] = this.listQuery.status;
      if (_filters.status == "0") {
        _filters.status = "";
      }
      let this_ = this;
      this.utils.request.promotionList(_filters, function(res) {
        if (res.code == "0000") {
          this_.list = res.data.list;
          this_.totalSize = res.data.totalCount;
        } else {
          //请求失败，展示mock数据
          var key = "status" + this_.listQuery.status;
          //this_.list = this_.tableList[key];
        }
        this_.loading = false;
      });

      // })
    },
    //查看
    seeNewTab: function(val) {
      //this.$router.push("/QueryPromotion");
      this.$router.push(`/QueryPresellPromotion?value=${val.id}&auth=0`);
    },
    //复制
    copyBtnShow: function(id) {
      let that = this;
      this.$confirm("确定要复制该活动？", "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          marketRequest.promotionDeepCopy({ id: id }, res => {
            that.$message({ message: "复制成功", type: "success" });
            that.getList();
          });
        })
        .catch(() => {});
      // const loading = this.$loading({
      //   lock: true,
      //   text: "Loading",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)"
      // });
      // let this_ = this;
      // let param = { id: id };
      // this.utils.request.promotionDeepCopy(param, function(res) {
      //   if (res.code == "0000") {
      //     this_.getList();
      //     loading.close();
      //   }
      // });
    },
    //关闭或者删除
    updatePromotionStatus: function(id, status) {
      let msg = "";
      if (status == 5) {
        msg = "该活动正在进行中，确定要关闭它？关闭后不可再次开启。";
      } else {
        msg = "该活动即将进行，确定要关闭它？关闭后不可再次开启。";
      }
      this.$confirm(msg, "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          let this_ = this;
          let params = { id: id, status: status };
          this.utils.request.promotionUpdate(params, function(res) {
            if (res.code == "0000") {
              this_.getList();
            } else {
              alert("更新失败");
            }
          });
        })
        .catch(() => {});
    },
    //删除
    deleteActivity: function(id) {
      this.$confirm("确定要执行删除操作么？删除后不可恢复!", "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          let this_ = this;
          let params = { id: id };
          this.utils.request.promotionDelete(params, function(res) {
            if (res.code == "0000") {
              this_.getList();
            } else {
              alert("删除失败");
            }
          });
        })
        .catch(() => {});
    },
    updateBtnShow: function(val) {
      this.$router.push(`/presellPromotionEvent?value=${val.id}&auth=1`);
    },
    //追加商品
    appendMerchantProduct: function(val) {
      this.$router.push(
        `/SeckillPromotionEvent?value=${val.id}&auth=0&active=3`
      );
    },
    //查看营销报告
    viewMarketingReport: function() {
      this.$router.push("/MarketingReport");
    },
    // 换页刷新-pageNo
    refreshPageRequest: function(pageNum) {
      this.listQuery.pageNo = pageNum;
      this.getList();
    },
    // 换页刷新-pageSize
    handleSizeChange: function(pageSize) {
      this.listQuery.pageSize = pageSize;
      this.listQuery.pageNo = 1;
      this.getList();
    },
    genFrontPromType: function(type) {
      return frontPromTypeConverter(type);
    },

    //查看分析
    viewAnalysi() {
      this.$router.push("/SecKillPromotionDetail");
      //
    },
    //二次营销
    SecondSell() {
      //
      this.$emit("SecondSell");
    }
  }
};
</script>
<style scoped lang="scss">
.textButton {
  margin-left: 1px;
}
</style>

